---
title: Tooltip
description:
  A tooltip is a brief, informative message that appears when a user interacts
  with an element.
package: "@chakra-ui/tooltip"
image: "components/tooltip.svg"
---

A tooltip is a brief, informative message that appears when a user interacts
with an element. Tooltips are usually initiated in one of two ways: through a
mouse-hover gesture or through a keyboard-hover gesture.

<ComponentLinks
  theme={{ componentName: "tooltip" }}
  github={{ package: "tooltip" }}
  npm={{ package: "@chakra-ui/tooltip" }}
/>

<carbon-ad></carbon-ad>

The `Tooltip` component follows the
[WAI-ARIA](https://www.w3.org/TR/wai-aria-practices/#tooltip) Tooltip Pattern.

## Import

```js
import { Tooltip } from "@chakra-ui/react"
```

## Usage

If the `children` of Tooltip is a `string`, we wrap with in a `span` with
`tabIndex` set to `0`, to ensure it meets the accessibility requirements.

> Note 🚨: If the `Tooltip` is wrapping a functional component, ensure that the
> functional component accepts a `ref` using `forwardRef`.

```jsx
<Tooltip label="Hey, I'm here!" aria-label="A tooltip">
  Hover me
</Tooltip>
```

### With an icon

```jsx
<Tooltip label="Phone number" fontSize="md">
  <PhoneIcon />
</Tooltip>
```

> Note 🚨: If you're wrapping an icon from `react-icons`, you need to also wrap
> the icon in a `span` element as
> [`react-icons` icons do not use `forwardRef`](https://github.com/react-icons/react-icons/issues/336).

### With arrow

```jsx
<Tooltip hasArrow label="Search places" bg="gray.300" color="black">
  <SearchIcon />
</Tooltip>
```

### Tooltip with focusable content

If the children of the tooltip is a focusable element, the tooltip will show
when you focus or hover on the element, and will hide when you blur or move
cursor out of the element.

```jsx
<Tooltip hasArrow label="Search places" bg="red.600">
  <Button>Button</Button>
</Tooltip>
```

### Disabled Tooltip

```jsx
<Tooltip isDisabled>
  <SearchIcon />
</Tooltip>
```

## Placement

Using the `placement` prop you can adjust where your tooltip will be displayed.

```jsx
<VStack spacing={6}>
  <HStack spacing={6}>
    <Tooltip label="Auto start" placement="auto-start">
      <Button>Auto-Start</Button>
    </Tooltip>

    <Tooltip label="Auto" placement="auto">
      <Button>Auto</Button>
    </Tooltip>

    <Tooltip label="Auto end" placement="auto-end">
      <Button>Auto-End</Button>
    </Tooltip>
  </HStack>

  <HStack spacing={6}>
    <Tooltip label="Top start" placement="top-start">
      <Button>Top-Start</Button>
    </Tooltip>

    <Tooltip label="Top" placement="top">
      <Button>Top</Button>
    </Tooltip>

    <Tooltip label="Top end" placement="top-end">
      <Button>Top-End</Button>
    </Tooltip>
  </HStack>

  <HStack spacing={6}>
    <Tooltip label="Right start" placement="right-start">
      <Button>Right-Start</Button>
    </Tooltip>

    <Tooltip label="Right" placement="right">
      <Button>Right</Button>
    </Tooltip>

    <Tooltip label="Right end" placement="right-end">
      <Button>Right-End</Button>
    </Tooltip>
  </HStack>

  <HStack spacing={6}>
    <Tooltip label="Bottom start" placement="bottom-start">
      <Button>Bottom Start</Button>
    </Tooltip>

    <Tooltip label="Bottom" placement="bottom">
      <Button>Bottom</Button>
    </Tooltip>

    <Tooltip label="Bottom end" placement="bottom-end">
      <Button>Bottom End</Button>
    </Tooltip>
  </HStack>

  <HStack spacing={6}>
    <Tooltip label="Left start" placement="left-start">
      <Button>Left-Start</Button>
    </Tooltip>

    <Tooltip label="Left" placement="left">
      <Button>Left</Button>
    </Tooltip>

    <Tooltip label="Left end" placement="left-end">
      <Button>Left-End</Button>
    </Tooltip>
  </HStack>
</VStack>
```

## More examples

```jsx
<Wrap spacing={6}>
  <WrapItem>
    <Tooltip label="I close on click">
      <Button>Close on Click - true(default)</Button>
    </Tooltip>
  </WrapItem>

  <WrapItem>
    <Tooltip label="I don't close on click" closeOnClick={false}>
      <Button>Close on Click - false</Button>
    </Tooltip>
  </WrapItem>

  <WrapItem>
    <Tooltip label="I am always open" placement="top" isOpen>
      <Button>Always Open</Button>
    </Tooltip>
  </WrapItem>

  <WrapItem>
    <Tooltip label="I am open by default" placement="left" defaultIsOpen>
      <Button>Open on startup</Button>
    </Tooltip>
  </WrapItem>

  <WrapItem>
    <Tooltip label="Opened after 500ms" openDelay={500}>
      <Button>Delay Open - 500ms</Button>
    </Tooltip>
  </WrapItem>

  <WrapItem>
    <Tooltip label="Closed after 500ms" closeDelay={500}>
      <Button>Delay Close - 500ms</Button>
    </Tooltip>
  </WrapItem>

  <WrapItem>
    <Tooltip label="I have 15px arrow" hasArrow arrowSize={15}>
      <Button>Arrow size - 15px</Button>
    </Tooltip>
  </WrapItem>
</Wrap>
```

## Props

<PropsTable of="Tooltip" />
